<script setup lang="tsx">
const isDark = ref(false)

const Sunny = () => <div class="i-noto:sun w-1em h-1em"></div>
const Moon = () => <div class="i-icon-park:moon w-1em h-1em"></div>

function toggleMode(flag: boolean) {
  if (flag) {
    document.documentElement.classList.add('dark')
  } else {
    document.documentElement.classList.remove('dark')
  }
}
watch(
  [isDark],
  () => {
    nextTick(() => {
      toggleMode(isDark.value)
    })
  },
  {
    immediate: true
  }
)
</script>

<template>
  <el-switch
    style="--el-switch-on-color: #333"
    v-model="isDark"
    :active-action-icon="Moon"
    :inactive-action-icon="Sunny"
  >
  </el-switch>
</template>
